<template>
  <div class="solution-detail">
    <Layout :isLoading="isLoading">
      <div class="banner">
        <div class="bg-img">
          <div class="content">
            <h2 class="text">Full Solution for Media Networking </h2>
            <br />
            <h3 class="text">4K/HD Video and Audio, Wireless and Cable</h3>
          </div>
        </div>
      </div>
      <div class="detail content">
        <h3>{{plan.name}}</h3>
        <p>{{plan.intro}}</p>
        <img :src="plan.image_main" alt="" @error="getError">
        <p v-html='plan.content'></p>
      </div>
      <ProductList :productArr="productArr" title="Plan Of Product"/>
    </Layout>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue'
import { useRoute } from 'vue-router'
import Layout from '/@/components/layout/Layout.vue'
import Banner from '../components/Banner.vue'
import Loading from '../components/Loading.vue'
import ProductList from '../components/product/ProductList.vue'
import {getPlanInfo, getPlanOfProductList} from "../api/solution";
import logoImg from "../assets/logo-error-small.png"
export default {
  name: 'SolutionDetail',
  components: {Layout,Banner,Loading,ProductList},
  setup(){
    const route = useRoute();
    let isLoading = ref(true);
    let plan = ref({})
    let productArr = ref([])
    onMounted(()=>{
      getPlanInfo(route.query.id * 1).then((res)=>{
        if(res && res.code === 200){
          plan.value = res.data;
          isLoading.value = false
        }
      })
      getPlanOfProductList({
        "page":1,
        "page_size":4,
        "plan_id":route.query.id * 1,
        "first_category":"",
        "second_category": ""
      }).then((res)=>{
        if(res && res.code === 200){
          productArr.value = res.data
        }
      })
    })
    const getError = (e) => {
      e.target.src = logoImg
    }
    return{
      isLoading,
      plan,
      getError,
      productArr
    }
  }
}
</script>

<style scoped lang="scss">
.solution-detail{
  text-align: center;
  .banner{
    width:100%;
    height:352px;
    .bg-img{
      background: url("../assets/images/2. solutiondetail.jpg") no-repeat center center;
      background-size:cover;
      width:100%;
      height:352px;
      .content{
        width: 70vw;
        margin-left: auto;
        margin-right: auto;
        max-width: 1286px;
        padding: 0 6px;
        .text{
          padding-top:60px;
          line-height: 80px;
          font-size:50px;
          color:white;
        }
        h3.text{
          color:yellow;
          font-size:30px;
          padding: 0;
          margin: 0;
          line-height: 50px;
        }
      }
    }
  }
  .content{
    margin: 0 auto;
    width: 70vw;
    h3{
      font-size:30px;
      line-height: 60px;
      margin-top: 10px;
    }
    p{
      line-height: 28px;
      font-size:14px;
    }
    img{
      width:100%;
      height:auto;
      margin:15px 0;
    }
  }
}
</style>
